<template>
  <!-- 封装弹框 -->
  <div class="zdyDialog">
    <el-dialog
      class="zdyDialog"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :width="width"
      :top="top"
      :lock-scroll="lockScroll"
      :append-to-body="appendToBody"
      @closed="close"
      @opened="opened"
    >
      <div slot="title" class="titleHeader">
        <div class="line" />
        <span>{{ dialogTitle }}</span>
      </div>

      <div ref="zdyInner" :style="{ maxHeight: maxHeight,overflowY: 'auto',overflowX: 'hidden' }">
        <slot>
          <!-- 弹框自定义的内容 -->
        </slot>
      </div>

      <span v-if="footer" slot="footer" class="dialog-footer">
        <el-button v-if="isExam" @click="exam">{{ cancelTitle }}</el-button>
        <el-button v-else @click="dialogVisible = false">{{ cancelTitle }}</el-button>
        <el-button type="primary" @click="onSubmit">{{ submitTitle }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    isExam: {
      type: Boolean,
      default: false
    },
    dialogTitle: {
      type: String,
      default: ''
    },
    cancelTitle: {
      type: String,
      default: '取 消'
    },
    submitTitle: {
      type: String,
      default: '保 存'
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    },
    top: {
      type: String,
      default: '15vh'
    },
    maxHeight: {
      type: String,
      default: '60vh'
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    footer: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible(newVal) {
      newVal &&
        this.$nextTick(() => {
          this.$refs.zdyInner.scrollTop = 0
        })
    }
  },
  methods: {
    exam() {
      this.$emit('exam')
    },
    onSubmit() {
      this.$emit('onSubmit')
    },
    close() {
      this.$emit('close')
    },
    opened() {
      this.$emit('opened')
    }
  }
}
</script>

<style lang="scss">
.zdyDialog {
  .el-dialog {
    border-radius: 16px;
    overflow: hidden;
  }
  .el-dialog__header {
    height: 60px;
    background: rgba(250, 250, 250, 1);
    padding: 0;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
  }
  .el-dialog__footer {
    height: 90px;
    background: rgba(250, 250, 250, 1);
    padding: 0;
    text-align: center;
    line-height: 90px;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    .el-button {
      width: 160px;
      height: 48px;
      font-size: 18px;
      font-family: MicrosoftYaHei;
    }
  }
  .el-dialog__headerbtn {
    font-size: 24px;
  }
  .titleHeader {
    display: flex;
    align-items: center;
    height: 60px;
    background: rgba(250, 250, 250, 0.39);
    .line {
      margin-left: 20px;
      width: 5px;
      height: 20px;
      background: rgba(36, 127, 255, 1);
      opacity: 1;
      border-radius: 20px;
    }
    span {
      margin-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 17px;
      color: #333333;
    }
  }
}
</style>
